<template>
  <div
    class="lottery-list border-left"
    :class="{
      expand: !mainState.lotterySwitch
    }"
  >
    <section class="grid grid-cols-5 gap-x-[8px] px-[10px] pt-[10px]">
      <article class="card">
        <div class="flex-1 w-0">
          <div class="name">用户余额</div>
          <div class="amount"><ui-amount locale :num="roomTotal?.Balance" /></div>
        </div>
        <div class="icon"><img src="@/assets/images/yue.png" /></div>
      </article>
      <article class="card">
        <div class="flex-1 w-0">
          <div class="name">今日流水</div>
          <div class="amount"><ui-amount locale :num="roomTotal?.BetAmount" /></div>
        </div>
        <div class="icon !bg-[#fac77d]"><img src="@/assets/images/luishui.png" /></div>
      </article>
      <article class="card">
        <div class="flex-1 w-0">
          <div class="name">今日盈亏</div>
          <div class="amount"><ui-amount locale :num="roomTotal?.NetAmount" /></div>
        </div>
        <div class="icon !bg-[#80d3f3]"><img src="@/assets/images/yingli.png" /></div>
      </article>
      <article class="card">
        <div class="flex-1 w-0">
          <div class="name">今日回水</div>
          <div class="amount"><ui-amount locale :num="roomTotal?.Water" /></div>
        </div>
        <div class="icon !bg-[#66de9d]"><img src="@/assets/images/huishui.png" /></div>
      </article>
      <article class="card">
        <div class="flex-1 w-0">
          <div class="name">总盈亏</div>
          <div class="amount">
            <ui-amount locale :num="roomTotal?.TotalNetAmount" />
          </div>
        </div>
        <div class="icon !bg-[#ff9684]"><img src="@/assets/images/yingkui.png" /></div>
      </article>
    </section>
    <section class="lottery-list-table">
      <div class="table-header">
        <div class="w-[100px]">游戏</div>
        <div class="w-[130px]">期号</div>
        <div class="flex-1">当期流水</div>
        <div class="flex-1">今日流水</div>
        <div class="flex-1">今日盈亏</div>
        <div class="w-[150px]">倒计时</div>
      </div>
      <div class="grow-[1] h-0 overflow-hidden">
        <el-scrollbar class="w-full h-full overflow-hidden" v-loading="mainState.loading">
          <div v-for="(item, index) in games">
            <div
              @click="handleExpand(item)"
              class="table-tr"
              :class="{
                'bg-[#fff]': index % 2 == 0,
                'bg-[#f4f7f8]': index % 2 != 0,
                '!text-[#888]': item.Status == 0
              }"
            >
              <div
                class="w-[100px]"
                :class="{
                  'text-[#0087b4]': item.Status == 1
                }"
              >
                {{ item.Name }}
              </div>
              <div class="w-[130px]">{{ item.Issue }}期</div>
              <div class="flex-1">{{ item.CurrentBetAmount }}</div>
              <div class="flex-1">{{ item.BetAmount }}</div>
              <div
                class="flex-1"
                :class="{
                  'text-[#0087b4]': item.NetAmount > 0
                }"
              >
                {{ item.NetAmount }}
              </div>
              <div class="w-[150px]">
                <template v-if="item.Status == 1">
                  <open-time
                    :CloseTime="item.CloseTime"
                    :NextTime="item.NextTime"
                    direction="col"
                  />
                </template>
                <template v-else>
                  <span class="text-gray-400 font-[500] mr-[5px] block leading-none text-[16px]"
                    >--:--</span
                  >
                </template>
              </div>
            </div>
            <div class="w-full min-h-[200px]" v-if="item.Expand">
              <el-table :data="item.Children" scrollbar-always-on stripe v-loading="item.Loading">
                <template #empty>
                  <ui-empty />
                </template>
                <el-table-column align="center" prop="Name" label="用户名">
                  <template #default="{ row }: TableItem">
                    {{ row.Name || "--" }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="Nickname" label="昵称"
                  ><template #default="{ row }: TableItem">
                    {{ row.Nickname || "--" }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="Balance" label="余额"
                  ><template #default="{ row }: TableItem">
                    {{ row.Balance }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="BetAmount" label="下注金额"
                  ><template #default="{ row }: TableItem">
                    {{ row.BetAmount }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="LastNetAmount" label="上期盈亏"
                  ><template #default="{ row }: TableItem">
                    {{ row.LastNetAmount }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="下注详情">
                  <template #default="{ row }: TableItem">
                    <el-button size="small" type="primary">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </section>
    <div class="arrow" @click="handleSwitch">
      <el-icon class="!text-white" v-if="mainState.lotterySwitch">
        <ArrowRight />
      </el-icon>
      <el-icon class="!text-white" v-else><ArrowLeft /></el-icon>
      <span>游戏数据</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useGameStore } from "@/store/modules/game";
import { reqGameTotalDetail, reqRoomTotal } from "@/api/main";
import $bus from "@/utils/bus";
import { cloneDeep } from "lodash-es";

interface TableItem {
  row: GameTotalMo["Children"][0];
}

const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);
const games = ref<GameTotalMo[]>(
  gameTotal.value.map(item => ({
    ...item,
    Expand: false,
    Children: <GameTotalMo["Children"]>[],
    Loading: false
  }))
);
const mainState = inject("mainState")! as MainState;
const roomTotal = ref<RoomTotalMo | null>(null);

const handleSwitch = () => {
  mainState.lotterySwitch = !mainState.lotterySwitch;
};
const getRoomTotal = async () => {
  try {
    const res = await reqRoomTotal();
    roomTotal.value = res.data;
  } catch (error) {}
};
const handleExpand = async (item: GameTotalMo) => {
  if (item.Status != 1) return;
  item.Expand = !item.Expand;
  item.Loading = true;
  if (item.Expand) {
    try {
      const res = await reqGameTotalDetail({
        Page: 1,
        PageSize: 199,
        LotteryId: item.LotteryId
      });
      item.Children = res.data.List;
    } catch (error) {}
  }
  item.Loading = false;
};
watch(
  () => gameTotal.value,
  async val => {
    const list = [] as GameTotalMo[];
    for (let i = 0; i < val.length; i++) {
      const item = val[i];
      const cur = games.value.find(jtem => jtem.LotteryId == item.LotteryId);
      item.Expand = cur?.Expand ?? false;
      item.Children = cur?.Children ?? [];
      list.push(item);
    }
    games.value = list;
  }
);
// 更新展开的游戏的下注数据
const updateItemBetData = async (LotteryId: number) => {
  const list = cloneDeep(games.value);
  for (let i = 0; i < list.length; i++) {
    if (list[i].LotteryId == LotteryId) {
      if (list[i].Expand) {
        const res = await reqGameTotalDetail({
          Page: 1,
          PageSize: 199,
          LotteryId: list[i].LotteryId
        });
        list[i].Children = res.data.List;
      }
    }
  }
  games.value = cloneDeep(list);
};
onMounted(() => {
  $bus.on("update-total-result", async data => {
    updateItemBetData(data.LotteryId);
  });
  $bus.on("game-bet", async data => {
    updateItemBetData(data.lottery_id);
  });
  getRoomTotal();
});
</script>
<style scoped>
.lottery-list {
  @apply w-[780px] bg-[#fff] flex flex-col justify-between relative h-full;
  transition: all 0.3s ease;
  border-radius: 0 8px 8px 0;
}
.lottery-list section {
  transition: all 0.3s ease;
}
.expand {
  @apply !w-[0px];
}
.expand section {
  @apply opacity-0;
}
.arrow {
  @apply absolute w-[80px] h-[50px] bg-[var(--el-color-primary)] left-[-80px];
  @apply flex items-center justify-center cursor-pointer z-[2000];
  border-radius: 50px 0 0 50px;
  top: calc(50% - 52px);
}
.arrow .el-icon {
  font-size: 20px;
  margin: 0 8px;
  font-weight: bold;
}
.arrow span {
  width: 30px;
  color: #fff;
}
.lottery-list-table {
  @apply !text-[16px] grow-[1] h-0 overflow-hidden mb-[15px] mx-[10px] mt-[10px] flex flex-col justify-between rounded-t-[8px];
  border: 1px solid #e9f2f5;
}
.table-header {
  @apply flex items-center text-center text-[14px] text-[#474747] justify-between bg-[#e9f2f5] rounded-t-[8px] h-[40px];
}
.table-tr {
  @apply flex items-center text-center text-[13px] text-[#474747] justify-between h-[40px] cursor-pointer;
}
</style>
<style lang="scss" scoped>
.card {
  height: 58px;
  font-size: 13px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
  padding-left: 10px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.05);
  .icon {
    background: #708aff;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  img {
    width: 20px;
    height: 20px;
  }
  .name {
    color: #999;
  }
  .amount {
    font-size: 15px;
    word-break: break-all;
  }
}
body #app .el-table {
  --el-table-border-color: #e9f2f5;
}
</style>
